<template>
  <!--  value-key 需修改
      :clearable="true"
  -->
  <ele-table-select
    clearable
    @clear="clearClick"
    v-model="value"
    :multiple="true"
    placeholder="请选择摄像头"
    :disabled="disabled"
    value-key="id"
    label-key="displayName"
    :table-config="tableConfig"
    :popper-width="580"
    @select="tabMultiple"
    @visible-change="hiddenDropdown"
    @remove-tag="removeTag"
  >
  </ele-table-select>
</template>

<script>
  import { listUsers } from '@/api/system/user';
  import {queryMerchantList} from "@/api/lncomingManagement/cameraManage";
  export default {
    props:{
    },
    data() {
      return {
        value: undefined,
        // 表格配置
        tableConfig: {
          datasource: ({page, limit, where, order}) => {
            return queryMerchantList({ ...where, ...order, page, limit,
              onState: 1,
              status: 1,
              merchantId: this.$store.state.user.info.merchantId // 商户id
            });
          },
          columns: [
            {
              columnKey: 'selection',
              type: 'selection',
              width: 45,
              align: 'center',
              reserveSelection: true
            },
            {
              columnKey: 'index',
              type: 'index',
              width: 45,
              align: 'center',
              showOverflowTooltip: true
            },

            {
              prop: 'displayName',
              label: '镜头名称',
              align: 'center',
              showOverflowTooltip: true,
            },
            {
              prop: 'deviceSerial',
              label: '序列号',
              align: 'center',
              showOverflowTooltip: true,
            }
          ],
          list:[],
          toolbar: false,
          pageSize: 5,
          pageSizes: [5, 10, 15, 20],
          rowClickChecked: true,
          rowClickCheckedIntelligent: false,
          size: 'small'
        },
        // 禁用
        disabled: false
      };
    },
    created() {
      listUsers().then((data) => {
        this.tableConfig.datasource = data;
      });
    },
    methods: {
      // 表格单选、多选选中事件
      tabMultiple(e){
        console.log("表格单选、多选选中事件",e)
        this.list=e
        console.log('多选list',this.list)
      },
      // 下拉框出现/隐藏时触发
      hiddenDropdown(e){
        if(e==false){  // 为隐藏，则集合list，返回父组件
          console.log("下拉框出现/隐藏时触发",e,'value',this.value,"this.list",this.list)
          if(this.value.length==0){  // 如果取消全选，不会触发tabMultiple（多选）事件，所以在隐藏需要重新赋值
            this.list=[]
            this.$emit('getList',this.list,1)
            return;
          }
          if(!this.list || this.list.length<=0){
            return
          }
          // 保留两个需要的字段 deviceSerial(序列号)
          this.list = this.list.map(({displayName,id,deviceSerial,validateCode})=>{
            return {displayName,id,deviceSerial,validateCode};
          })
          for(let i=0;i<this.list.length;i++){
            this.$set(this.list[i],'sort','')
            this.$set(this.list[i],'materialDuration','')
          }
          this.$emit('getList',this.list,1)
        }
      },
      // 从输入框列表移除，同步修改表格数据
      removeTag(e){
        this.list= this.list.filter((d) => d.id !== e)  // 如果移除不赋值，那么在输入框和下拉框同时存在是，输入框移除无效
        console.log('移除e',e)
        this.$emit('getList',e,2)

      },
      // 修改多选表格展示value
      // e：为传入的删除id
      // 清空多选表格数据
      clear(e){
        this.list= this.list.filter((d) => d.id !== e)
        let displayName= this.list.map(x => {return x.id})
        this.value = displayName
      },
      clearClick(e){
        console.log("清空事件e=============",e)
        this.value=[]
      }
    },
  };
</script>
